<template>
  <el-upload ref="uploadRef" class="upload-demo" :http-request="uploadFile" :auto-upload="false" :limit="1" action="#">

   
    <template #trigger>
      <el-button type="primary" plain>选择头像</el-button>
    </template>
    <el-button class="ml-3" type="primary" @click="submitUpload">上传头像
      
    </el-button>
    <div><img :src="avatar" alt="" style="width: 100px; height: 100px;" /></div>
   
  </el-upload>

</template>


<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      avatar: "",
    };
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  methods: {
    ...mapMutations("user", ["updateAvatar"]),
    // // 上传文件
    uploadFile(params) {
      // console.log(this.user[0].uid);
      // console.log(params);
      console.log(this.user[0].uid);
      let formdata = new FormData();
      formdata.append("Avatar_img", params.file);
      formdata.append("uid", this.user[0].uid);
      // console.log(params.file);
      // console.log(this.uid);
      this.axios({
        url: "http://localhost:3000/users/uploadAvatar",
        method: "POST",
        data: formdata,
        headers: {
          "content-Type": "multipart/form-data",
        },
      })
        .then((res) => {
          // 更新头像URL到Vuex  
          this.avatar = res.data.data;
          // const newavatar = 'new-avatar.jpg'; 
          console.log(this.avatar);
          // this.$store.commit('updateAvatar', this.avatar); 
          // this.$store.commit('user/updateAvatar', res.data.data); // 假设res.data.data是新的头像URL  
          // 同时更新组件内部的avatar变量（如果需要的话）  
          ; // 假设这是你要更新的用户的 ID  
          // const userId = this.user[0].uid
          // const avatar = res.data.data; // 新的头像 URL  
          // this.$store.commit('updateAvatar', { userId, avatar });
          alert("头像上传成功,重新登录后头像将更改");
        })
        .catch((err) => {
          console.error(err);
          alert("头像上传失败");
        });
    },
    // 点击上传
    submitUpload() {
      // 触发上传 调用配置 :http-request="uploadFile"
      // 即触发 uploadFile函数
      // uploadRef.value?.submit(); // 上传完成后执行的操作 ...
      this.$refs.uploadRef.submit();
      this.$refs.uploadRef.clearFiles();
    },
  },
};
</script>

<style scoped>
/* 样式部分 */


</style>
